<template>
  <div
    class="game-box"
    :style="{
      '--5cac1e84': `url(/images/activity/clipdoll/btn.png)`,
      '--5cac1e85': `url(/images/activity/clipdoll/zhongjiang.png)`,
    }"
  >
    <NuxtImg
      class="game-k1"
      src="/images/activity/clipdoll/game-k1.png"
      alt=""
    />
    <NuxtImg
      class="game-k2"
      src="/images/activity/clipdoll/game-k2.png"
      alt=""
    />
    <div class="con">
      <NuxtImg
        v-for="ball in balls"
        :key="ball.key"
        :class="ball.className"
        :src="ball.src"
        alt=""
      />
    </div>
    <div class="zhua-hidden">
      <div class="zhua" style="left: 1.2rem">
        <NuxtImg
          class="gan"
          src="/images/activity/clipdoll/zhua-g.png"
          alt=""
        />
        <NuxtImg
          class="left tr-l"
          src="/images/activity/clipdoll/zhua-left.png"
          alt=""
        />
        <NuxtImg
          class="right tr-r"
          src="/images/activity/clipdoll/zhua-right.png"
          alt=""
        />
        <NuxtImg
          class="qiu"
          src="/images/activity/clipdoll/01.png"
          v-show="showDrop"
          alt=""
        />
      </div>
      <div class="con2">
        <NuxtImg
          v-for="ball in balls2"
          :key="ball.key"
          :class="ball.className"
          :src="ball.src"
          alt=""
        />
      </div>
    </div>
  </div>
  <div
    class="btn-box"
    :style="{
      '--5cac1e84': `url(/images/activity/clipdoll/btn.png)`,
      '--5cac1e85': `url(/images/activity/clipdoll/zhongjiang.png)`,
    }"
    @click="emit('changeBaojinbi', true)"
  >
    <div class="btn">
      <span>x{{ grabCount }}</span>
      <span>{{ lang.game_grab }}</span>
    </div>
  </div>
  <div
    class="time"
    :style="{
      '--5cac1e84': `url(/images/activity/clipdoll/btn.png)`,
      '--5cac1e85': `url(/images/activity/clipdoll/zhongjiang.png)`,
    }"
  >
    <p>{{ lang.game_restart }} {{ restartText }}</p>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/clipdoll");

const emit = defineEmits(["changeBaojinbi"]);

const grabCount = ref(0);
const restartText = ref("2d 10:49:38");

const showDrop = ref(true);

// 上层小球
const balls = ref([
  { key: 1, className: "qiu1", src: "/images/activity/clipdoll/04.png" },
  { key: 2, className: "qiu2", src: "/images/activity/clipdoll/01.png" },
  { key: 3, className: "qiu3", src: "/images/activity/clipdoll/03.png" },
  { key: 4, className: "qiu4", src: "/images/activity/clipdoll/04.png" },
  { key: 5, className: "qiu5", src: "/images/activity/clipdoll/03.png" },
  { key: 6, className: "qiu6", src: "/images/activity/clipdoll/05.png" },
  { key: 7, className: "qiu7", src: "/images/activity/clipdoll/05.png" },
  { key: 8, className: "qiu8", src: "/images/activity/clipdoll/05.png" },
  { key: 9, className: "qiu9", src: "/images/activity/clipdoll/05.png" },
  { key: 10, className: "qiu10", src: "/images/activity/clipdoll/03.png" },
  { key: 11, className: "qiu11", src: "/images/activity/clipdoll/03.png" },
  { key: 12, className: "qiu12", src: "/images/activity/clipdoll/02.png" },
  { key: 13, className: "qiu13", src: "/images/activity/clipdoll/05.png" },
  { key: 14, className: "qiu14", src: "/images/activity/clipdoll/01.png" },
  { key: 15, className: "qiu15", src: "/images/activity/clipdoll/02.png" },
  { key: 16, className: "qiu16", src: "/images/activity/clipdoll/02.png" },
  { key: 17, className: "qiu17", src: "/images/activity/clipdoll/01.png" },
  { key: 18, className: "qiu18", src: "/images/activity/clipdoll/03.png" },
  { key: 19, className: "qiu19", src: "/images/activity/clipdoll/01.png" },
  { key: 20, className: "qiu20", src: "/images/activity/clipdoll/01.png" },
  { key: 21, className: "qiu21", src: "/images/activity/clipdoll/01.png" },
  { key: 22, className: "qiu22", src: "/images/activity/clipdoll/02.png" },
  { key: 23, className: "qiu23", src: "/images/activity/clipdoll/04.png" },
  { key: 24, className: "qiu24", src: "/images/activity/clipdoll/01.png" },
  { key: 25, className: "qiu25", src: "/images/activity/clipdoll/05.png" },
  { key: 26, className: "qiu26", src: "/images/activity/clipdoll/04.png" },
  { key: 27, className: "qiu27", src: "/images/activity/clipdoll/04.png" },
]);

// 下层小球
const balls2 = ref([
  { key: 1, className: "qiu1", src: "/images/activity/clipdoll/04.png" },
  { key: 2, className: "qiu2", src: "/images/activity/clipdoll/01.png" },
  { key: 3, className: "qiu3", src: "/images/activity/clipdoll/03.png" },
  { key: 4, className: "qiu4", src: "/images/activity/clipdoll/04.png" },
  { key: 5, className: "qiu5", src: "/images/activity/clipdoll/03.png" },
  { key: 6, className: "qiu6", src: "/images/activity/clipdoll/05.png" },
  { key: 7, className: "qiu7", src: "/images/activity/clipdoll/05.png" },
  { key: 8, className: "qiu8", src: "/images/activity/clipdoll/05.png" },
]);
</script>

<style scoped lang="scss">
.game-box {
  width: 100%;
  width: 9.82rem;
  height: 9rem;
  position: relative;
  margin: 0.3rem auto;
}
.game-box .game-k1 {
  width: 9.82rem;
  height: 8.92rem;
  position: absolute;
  z-index: 4;
}
.game-box .game-k2 {
  width: 9.82rem;
  height: 8.96rem;
  position: absolute;
  top: 0.15rem;
  z-index: 1;
}
.game-box .con {
  margin: 0 auto;
  height: 6rem;
  width: 8rem;
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  transform: translate(-50%);
  z-index: 2;
  z-index: 3;
}
.game-box .con img {
  width: 1.2rem;
  position: absolute;
}
.game-box .con .qiu1 {
  width: 1.8rem;
  transform: translateY(4.2rem) rotate(20deg);
  z-index: 6;
}
.game-box .con .qiu2 {
  width: 1.8rem;
  transform: translate(1.1rem, 4.2rem) rotate(0);
  z-index: 7;
}
.game-box .con .qiu3 {
  width: 1.8rem;
  transform: translate(2.2rem, 4.2rem) rotate(30deg);
  z-index: 6;
}
.game-box .con .qiu4 {
  width: 1.8rem;
  transform: translate(3.4rem, 4.2rem) rotate(220deg);
  z-index: 6;
}
.game-box .con .qiu5 {
  width: 1.8rem;
  transform: translate(4.8rem, 4.2rem) rotate(100deg);
  z-index: 7;
}
.game-box .con .qiu6 {
  width: 1.8rem;
  transform: translate(6.2rem, 4.2rem) rotate(180deg);
  z-index: 6;
}
.game-box .con .qiu7 {
  width: 1.5rem;
  transform: translateY(3.6rem) rotate(1250deg);
  z-index: 5;
}
.game-box .con .qiu8 {
  width: 1.5rem;
  transform: translate(1.3rem, 3.9rem) rotate(150deg);
  z-index: 5;
}
.game-box .con .qiu9 {
  width: 1.5rem;
  transform: translate(2.7rem, 3.6rem) rotate(180deg);
  z-index: 5;
}
.game-box .con .qiu10 {
  width: 1.5rem;
  transform: translate(4rem, 3.7rem) rotate(20deg);
  z-index: 5;
}
.game-box .con .qiu11 {
  width: 1.5rem;
  transform: translate(5rem, 3.8rem) rotate(10deg);
  z-index: 5;
}
.game-box .con .qiu12 {
  width: 1.5rem;
  transform: translate(6.2rem, 3.7rem) rotate(110deg);
  z-index: 5;
}
.game-box .con .qiu13 {
  width: 1.3rem;
  transform: translateY(3.13rem) rotate(130deg);
  z-index: 2;
}
.game-box .con .qiu14 {
  width: 1.3rem;
  transform: translate(1rem, 3.24rem) rotate(50deg);
  z-index: 2;
}
.game-box .con .qiu15 {
  width: 1.3rem;
  transform: translate(2rem, 3.16rem) rotate(10deg);
  z-index: 2;
}
.game-box .con .qiu16 {
  width: 1.3rem;
  transform: translate(3rem, 3.2rem) rotate(80deg);
  z-index: 2;
}
.game-box .con .qiu17 {
  width: 1.3rem;
  transform: translate(4rem, 3.1rem) rotate(50deg);
  z-index: 2;
}
.game-box .con .qiu18 {
  width: 1.3rem;
  transform: translate(5rem, 3.2rem) rotate(70deg);
  z-index: 2;
}
.game-box .con .qiu19 {
  width: 1.3rem;
  transform: translate(6rem, 3.2rem) rotate(130deg);
  z-index: 3;
}
.game-box .con .qiu20 {
  width: 1.3rem;
  transform: translate(6.7rem, 3.2rem) rotate(1970deg);
  z-index: 2;
}
.game-box .con .qiu21 {
  width: 1.2rem;
  transform: translate(0.8rem, 4.8rem) rotate(210deg);
  z-index: 2;
}
.game-box .con .qiu22 {
  width: 1.2rem;
  transform: translate(2rem, 4.8rem) rotate(110deg);
  z-index: 2;
}
.game-box .con .qiu23 {
  width: 1.2rem;
  transform: translate(3rem, 4.8rem) rotate(20deg);
  z-index: 2;
}
.game-box .con .qiu24 {
  width: 1.2rem;
  transform: translate(4.2rem, 4.8rem) rotate(80deg);
  z-index: 2;
}
.game-box .con .qiu25 {
  width: 1.2rem;
  transform: translate(6rem, 4.8rem) rotate(70deg);
  z-index: 2;
}
.game-box .con .qiu26 {
  width: 1.2rem;
  transform: translate(6.9rem, 4.8rem) rotate(230deg);
  z-index: 2;
}
.game-box .con .qiu27 {
  width: 1.2rem;
  transform: translate(6.9rem, 3.8rem) rotate(130deg);
  z-index: 4;
}
.game-box .zhua-hidden {
  height: 80%;
  overflow: hidden;
  width: 100%;
  margin-top: 2rem;
  position: absolute;
  z-index: 1;
}
.game-box .zhua {
  width: 2rem;
  height: 6.76rem;
  position: absolute;
  top: -5.6rem;
  left: 1.2rem;
  z-index: 2;
  text-align: center;
  transition: transform 2s ease-in-out;
}
.game-box .zhua .gan {
  width: 1.28rem;
}
.game-box .zhua .left {
  width: 0.79rem;
  height: 1.07rem;
  position: absolute;
  bottom: -0.85rem;
  left: -0.1rem;
  transition: transform 0.5s ease-in-out;
}
.game-box .zhua .tr-l {
  transform: translate(0.35rem, 0.1rem) rotate(-40deg);
}
.game-box .zhua .right {
  width: 0.79rem;
  height: 1.07rem;
  position: absolute;
  bottom: -0.85rem;
  right: -0.1rem;
  transition: transform 0.5s ease-in-out;
}
.game-box .zhua .tr-r {
  transform: translate(-0.35rem, 0.1rem) rotate(40deg);
}
.game-box .zhua .qiu {
  width: 1.6rem;
}
.game-box .zhua-hidden .con2 {
  position: relative;
  z-index: 1;
}
.game-box .zhua-hidden .con2 img {
  width: 1.2rem;
  position: absolute;
}
.game-box .zhua-hidden .con2 .qiu1 {
  transform: translate(1rem, 3.1rem) rotate(20deg);
  z-index: 6;
}
.game-box .zhua-hidden .con2 .qiu2 {
  transform: translate(2rem, 3.04rem) rotate(60deg);
  z-index: 6;
}
.game-box .zhua-hidden .con2 .qiu3 {
  transform: translate(3rem, 3.1rem) rotate(160deg);
  z-index: 6;
}
.game-box .zhua-hidden .con2 .qiu4 {
  transform: translate(4rem, 3rem) rotate(260deg);
  z-index: 6;
}
.game-box .zhua-hidden .con2 .qiu5 {
  transform: translate(5rem, 3rem) rotate(90deg);
  z-index: 6;
}
.game-box .zhua-hidden .con2 .qiu6 {
  transform: translate(6rem, 3rem) rotate(180deg);
  z-index: 6;
}
.game-box .zhua-hidden .con2 .qiu7 {
  transform: translate(7rem, 3rem) rotate(360deg);
  z-index: 6;
}
.game-box .zhua-hidden .con2 .qiu8 {
  transform: translate(7.7rem, 3rem) rotate(260deg);
  z-index: 6;
}
.btn-box {
  margin-top: 0.5rem;
  position: relative;
}
.btn-box .btn {
  margin: 0 auto;
  width: 4.65rem;
  height: 1.47rem;
  background-image: var(--5cac1e84);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  line-height: 0.8rem;
  box-sizing: border-box;
  padding: 0 0.6rem;
}
.btn-box .btn span:nth-of-type(1) {
  font-weight: 700;
  font-size: 0.5rem;
  color: var(--theme-dec4);
  margin-right: 0.8rem;
}
.btn-box .btn span:nth-of-type(2) {
  font-weight: 700;
  font-size: 0.5rem;
  color: var(--theme-neutral1);
}
.time {
  margin-top: 0.3rem;
  text-align: center;
}
.time p {
  font-weight: 400;
  font-size: 0.32rem;
  color: #ffffff80;
  line-height: 0.4rem;
}
</style>
